<template>
  <div class="supervise-information-management">
    <zk-searcher v-model="query" :options="searchColumns" />
    <w-block class="body" title="督办信息列表" style="margin-top: 10px">
      <zk-table
        :columns="tableColumns"
        :service="service"
        :query="query"
        :actions="[]"
      >
        <template #fk_flag_desc="scope">
          <div style="text-align: center">
            <el-link
              v-if="scope.row.fk_flag_desc == '已反馈'"
              type="primary"
              @click="showModal(scope.row)"
            >{{ scope.row.fk_flag_desc }}
            </el-link>
            <span
              v-else
              type="info"
            >{{ scope.row.fk_flag_desc }}
            </span>
          </div>
        </template>
      </zk-table>
    </w-block>
    <w-dialog :visible.sync="visible" width="800px" title="查看结果">
      <table class="table-look-details">
        <tr v-if="model.fk_time">
          <td class="bg-title">反馈时间</td>
          <td>{{model.fk_time}}</td>
        </tr>
        <tr>
          <td class="bg-title">任务超时原因</td>
          <td>{{model.reason_type==='01'?'内部原因':'外部原因'}}</td>
        </tr>
        <tr v-if="this.model.fk_duty_person">
          <td class="bg-title">责任人</td>
          <td>{{model.fk_duty_person}}</td>
        </tr>
        <tr>
          <td class="bg-title">超时具体原因</td>
          <td>{{model.overtime_content}}</td>
        </tr>
        <tr>
          <td class="bg-title">整改措施</td>
          <td>{{model.handle_content}}</td>
        </tr>
        <tr>
          <td class="bg-title">反馈人</td>
          <td>{{model.done_person_name}}</td>
        </tr>
      </table>
      <template #footer>
        <div class="flex-end">
          <el-button type="primary" @click="visible=false">关 闭</el-button>
        </div>
      </template>
    </w-dialog>
  </div>
</template>
<script>
  import { TYPE_ENUM } from '@/common/zk-constants'
  import { taskSupervisionCommand as service } from '@/services'
  import SearchTableCRUDMixin from '@/mixins/search-table-crud-mixin'
  import moment from 'moment'

  const columns = [
    { 'label': '项目名称', 'key': 'project_name', table: true, search: true },
    { 'label': '工作名称', 'key': 'work_name', table: true },
    { 'label': '任务名称', 'key': 'task_name', table: true },
    // {
    //   'label': '责任单位',
    //   'key': 'duty_dw',
    //   type: TYPE_ENUM.SELECT,
    //   storeKey: 'unitList',
    //   table: true,
    //   search: true,
    //   form: true,
    //   required: true
    // },
    {
      'label': '责任部门',
      'key': 'duty_dept',
      type: TYPE_ENUM.SELECT,
      storeKey: 'orgList',
      table: true,
      search: true,
    },
    {
      'label': '任务完成情况',
      type: TYPE_ENUM.SELECT,
      storeKey: 'finishState',
      'key': 'finish_state',
      search: true,
      table: true,
    },
    { 'label': '督办内容', 'key': 'ld_content', table: true },
    {
      'label': '督办时间', 'key': 'xf_time',
      // render: (data, { property }) => moment(data[property]).format('YYYY-MM-DD'),
      table: true
    },
    {
      'label': '是否反馈',
      'key': 'fk_flag_desc',
      table: true,
      slot: true,
    },
    {
      'label': '是否反馈',
      'key': 'reply_flag',
      type: TYPE_ENUM.RADIO,
      storeKey: 'feedbackBooleanState',
      search: true,
      table: false,
    },
  ]

  export default {
    mixins: [SearchTableCRUDMixin],
    data() {
      return {
        columns,
        service,
        visible: false,
      }
    },
    methods: {
      showModal(row) {
        this.model = { ...row }
        this.visible = true
      },
    },
  }
</script>
<style scoped lang="scss">
  .centerbox {
    display: flex;
    flex-direction: column;
    width: 100%;

    .item {
      display: flex;
      flex-direction: row;
      padding: 10px 10px;
      font-size: 16px;

      .datatitle {
        width: 30%;
        display: flex;
        justify-content: flex-end;
      }

      .datalist {
        width: 65%;
        padding-left: 20px;
      }
    }
  }

  .table-look-details {
    padding: 20px 0;
    width: 100%;
    border-collapse: collapse;

    td {
      border: 1px solid rgba(77, 116, 251, 0.3);
      padding: 10px 20px;
    }

    .bg-title {
      width: 200px;
      background-color: #f5f5f5;
    }

  }
</style>

